<template>
    <view class="hei-100">
        <scroll-view class="hei-100" scroll-y @scrolltolower="_getList">
            <empty v-if=" navList[0].orderList.length === 0"></empty>
            </empty>
            <view class="steps" v-for="(a, index) in  navList[0].orderList" :key="index" v-else
                @click="f_dfjldetail(a,index)">
                <view class="steps_item">
                    <view class="s_r">
                        <view class="line" style="background-color: #cccccc;"></view>
                        <view class="index" style="background-color: #5fc8fb;">
                        </view>
                        <view class="line" style="background-color: #cccccc;"></view>
                    </view>
                    <view class="s_l">
                        <view class="info_item">
                            <view style="width: 88%;display: flex;flex-direction: column;">
                                <view style="justify-content: space-between;width: 100%;display: flex;">
                                    <view>
                                        <text style="color: #5fc8fb;">{{a.targetName}}</text>
                                    </view>
                                    <view>
                                        <text v-if="a.status=='0'" style="color: gray;">未审核</text>
                                        <text v-if="a.status=='1'" style="color: #498fee;">已审核</text>
                                        <text v-if="a.status=='2'" style="color: #bd5041;">已驳回</text>
                                    </view>
                                </view>
                                <view style="display: flex;justify-content: space-between;align-items: center;">
                                    <view style="width: 55%;text-align: left;display: flex;">
                                        <text>指标类型：{{a.targetTypeName}}</text>

                                    </view>
                                    <view style="width: 45%;text-align: left;">
                                        <text>分值：</text>
                                        <text style="color: #5fc8fb;">{{a.targetScore}}</text>
                                    </view>
                                </view>
                                <view style="display: flex;justify-content: space-between;align-items: center;">
                                    <view style="width: 55%;text-align: left;">
                                        <text>指标学期：{{a.schoolTerm}}</text>
                                    </view>
                                    <view style="width: 50%;text-align: left;">
                                        <text>登记日期：{{f_substring(a.createTime)}}</text>
                                    </view>
                                </view>
                                <view style="display: flex;justify-content: space-between;align-items: center;">
                                    <view style="width: 45%;text-align: left;">
                                        <text>提报人：{{a.createBy}}</text>
                                    </view>
                                </view>
                            </view>
                            <view v-if="a.status=='0'"
                                style="border-bottom-right-radius: 10rpx;border-top-right-radius: 10rpx;  width: 12%;background-color: gray;position: absolute;right: 0;top: 0;bottom: 0;display: flex;align-items: center;justify-content: center;">
                                <text style="color: #ffffff;font-weight: bold;font-size: 32rpx;"
                                    v-if="a.verifyScore*1>0">
                                    +</text>
                                <text style="color: #ffffff;font-weight: bold;font-size: 32rpx;"
                                    v-if="a.verifyScore==null">
                                    +</text>
                                <text style="color: #ffffff;font-weight: bold;font-size: 32rpx;">
                                    {{a.targetScore}}</text>
                            </view>
                            <view v-if="a.status=='1'"
                                style="border-bottom-right-radius: 10rpx;border-top-right-radius: 10rpx;  width: 12%;background-color: #498fee;position: absolute;right: 0;top: 0;bottom: 0;display: flex;align-items: center;justify-content: center;">
                                <text style="color: #ffffff;font-weight: bold;font-size: 32rpx;"
                                    v-if="a.verifyScore*1>0">
                                    +</text>
                                <text style="color: #ffffff;font-weight: bold;font-size: 32rpx;">
                                    {{a. verifyScore}}</text>
                            </view>
                            <view v-if="a.status=='2'"
                                style="border-bottom-right-radius: 10rpx;border-top-right-radius: 10rpx;  width: 12%;background-color: #bd5041;position: absolute;right: 0;top: 0;bottom: 0;display: flex;align-items: center;justify-content: center;">
                                <text style="color: #ffffff;font-weight: bold;font-size: 32rpx;"
                                    v-if="a.verifyScore*1>0">
                                    +</text>
                                <text style="color: #ffffff;font-weight: bold;font-size: 32rpx;">
                                    {{a. targetScore}}</text>
                            </view>
                        </view>
                    </view>

                </view>
            </view>
            <m-loading :loading="navList[0].loading" :finished="navList[0].finished"></m-loading>
        </scroll-view>
    </view>
</template>

<script>
    import mLoading from "@/components/m-loading.vue";
    import { timeago, jj, Format, isnull } from "@/common/lib/fun.js";
    import empty from "@/components/empty/empty.vue";
    import listMixin from "@/common/mixins/personData.js";

    export default {
        mixins: [listMixin],
        components: {
            empty,
            mLoading
        },
        data() {
            return {
                navList: [
                    {
                        state: 0,
                        text: "得分记录",
                        orderList: [],
                        total: 0,
                        page: 1,
                        rows: 10,
                        loading: "more",
                        finished: false,
                    }
                ],
            }
        },
        onLoad(options) {
            uni.setNavigationBarTitle({
                title: `个人得分记录(${options.title}) `
            })
        },
        methods: {
            f_substring(r) {
                if (isnull(r) != "") {
                    return r.substring(0, 10);
                }
            },
            async _getList(source) {
                var t = this;
                let navItem = t.navList[0];
                if (navItem.finished) return;
                if (navItem.loading == "loading") return;
                //tab切换只有第一次需要加载数据
                if (source === "tabChange" && navItem.finished) return;
                navItem.loading = "loading";
                // 根据实际情况修改自己修改key
                let res = await t.loadData({
                    staffId: t.staffId,
                    pageNo: navItem.page,
                    pageSize: navItem.rows,
                    name: "**",
                });

                if (res.success) {
                    navItem.loading = "more";
                    navItem.total = res.result.total;
                    res.result.records.forEach((a) => {
                        t.navList[0].orderList.push(a);
                        t.list.push(a);
                    });
                    if (navItem.page > parseInt((navItem.total - 1) / navItem.rows)) {
                        navItem.loading = "more";
                        navItem.finished = true;
                    }
                    navItem.page++;
                    t.total = res.result.total;
                } else {
                    navItem.loading = "nomore";
                    this.$refs.uToast.show({
                        title: "异常错误",
                        type: "error",
                    });
                }
            },
            loadData(requestParams) {
                let t = this;
                return new Promise((res, rej) => {
                    let params = requestParams;
                    if (!params) {
                        params = {
                            staffId: t.staffId,
                            pageNo: t.page,
                            pageSize: t.size,
                            name: "**",
                        };
                    }
                    setTimeout(() => {
                        t.$api
                            .req_post("staff_grow/staff/stStaffTarget/list", params, "", false)
                            .then((val) => {
                                res(val);
                            });
                    }, 500);
                });
            },
        }
    }
</script>

<style scoped lang="scss">
    .steps {
        display: flex;
        flex-direction: column;

        .steps_item {
            display: flex;

            .s_r {
                padding: 0 20rpx;
                display: flex;
                flex-direction: column;
                align-items: center;

                .line {
                    flex: 1;
                    width: 5rpx;
                    background-color: #fff;
                }

                .index {
                    width: 25rpx;
                    height: 25rpx;
                    font-size: 12px;
                    text-align: center;
                    line-height: 25rpx;
                    border-radius: 50%;
                }
            }
        }
    }
</style>